<template>
  <page-header-wrapper>
    <application-search @search="handleSearch" @reset="handleReset"> </application-search>
    <a-card :bordered="false">
      <s-table
        ref="table"
        size="default"
        rowKey="ID"
        :columns="columns"
        :changeExportQuery="true"
        :data="loadData"
        :dataT="loadDataT"
        :dataG="loadDataG"
        :dataL="loadDataL"
        :scroll="{ x: true }"
        :pagination="{ showTotal: (total) => `共 ${total} 条` }"
      >
        <div slot="tabAction">
          <buttonSelect
            v-model="typeSelect"
            :options="[
              { value: '', label: '全部' },
              { value: '变更', label: '变更' },
              { value: '退出', label: '退出' },
              { value: '其他', label: '历史数据' },
              // { value: '2', label: '已接收' },
              // { value: '-1', label: '已退回' },
            ]"
            @change="tableRefresh(true)"
          ></buttonSelect>
        </div>
        <span slot="index" slot-scope="text, record, index">{{ index + 1 }} </span>
        <ellipsis slot="YdReason" :length="20" tooltip slot-scope="text" class="text-warning">{{
          text || '/'
        }}</ellipsis>
        <span slot="description" slot-scope="text">
          <ellipsis :length="24" tooltip>{{ text }}</ellipsis>
        </span>
        <span slot="YdData" slot-scope="text">{{ text | moment('YYYY-MM-DD') }} </span>
        <div slot="action" slot-scope="text, record">
          <y-button type="link" @click="handleChangeForm(record)">修改异动</y-button>
          <y-button type="link" class="text-success" @click="handleDeclare(record)">同意申报</y-button>
          <y-button type="link" class="text-error" @click="handleInvalid(record)">作废</y-button>
        </div>
      </s-table>
    </a-card>
    <change-form :visible.sync="visibleForm" :data.sync="editData" @change="handleFormChange"></change-form>
    <a-modal
      title="提示"
      :visible="visibleInvalid"
      :confirm-loading="confirmLoading"
      @ok="handleInvalidConfirm"
      @cancel="handleInvalidCancel"
    >
      <a-form :form="invalidForm">
        <a-form-item label="作废原因">
          <a-textarea
            v-decorator="['ydReson', { rules: [{ required: true, message: '请输入作废原因' }] }]"
            placeholder="请输入作废原因"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          ></a-textarea>
        </a-form-item>
      </a-form>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { STable, Ellipsis, buttonSelect, applicationSearch } from '@/components'
import changeForm from './components/changeForm.vue'
import { getAreaYdsb, updateYdZF } from '@/api/DistrictReviewReportManagement'
import { postYdsb } from '@/api/common'
import moment from 'moment'
export default {
  name: 'cityComplexInquireList',
  components: {
    STable,
    Ellipsis,
    changeForm,
    buttonSelect,
    applicationSearch,
  },
  data() {
    return {
      visibleForm: false,
      typeSelect: '',
      editData: {},
      queryParam: {
        DeptID: this.$store.getters.userInfo.DeptID,
        strContent: {},
      },
      queryParamT: {
        DeptID: this.$store.getters.userInfo.DeptID,
        strContent: {
          YDLX: '退出',
        },
      },
      queryParamG: {
        DeptID: this.$store.getters.userInfo.DeptID,
        strContent: {
          YDLX: '变更',
        },
      },
      queryParamL: {
        DeptID: this.$store.getters.userInfo.DeptID,
        strContent: {
          YDLX: '其他',
        },
      },
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 80,
          scopedSlots: { customRender: 'index' },
        },
        {
          title: '申请编号',
          align: 'center',
          dataIndex: 'ApplyNo',
          width: 140,
        },
        {
          title: '申请人',
          align: 'center',
          dataIndex: 'Proposer',
          width: 140,
        },
        {
          title: '身份证号',
          align: 'center',
          dataIndex: 'IDCard',
          width: 180,
        },
        {
          title: '区县',
          align: 'center',
          dataIndex: 'qxDeptName',
          width: 220,
          scopedSlots: { customRender: 'description' },
        },
        {
          title: '街道/办事处',
          align: 'center',
          dataIndex: 'jzDeptName',
          width: 220,
          scopedSlots: { customRender: 'description' },
        },
        {
          title: '异动类型',
          align: 'center',
          dataIndex: 'YDLX',
        },
        {
          title: '现保障人口',
          align: 'center',
          dataIndex: 'XBZRK',
        },
        {
          title: '现人均住房面积',
          align: 'center',
          dataIndex: 'XRJZFMJ',
        },
        {
          title: '异动原因',
          align: 'center',
          dataIndex: 'YdReason',
          scopedSlots: { customRender: 'YdReason' },
          width: 220,
        },
        {
          title: '异动时间',
          align: 'center',
          dataIndex: 'YdData',
          scopedSlots: { customRender: 'YdData' },
          width: 140,
        },
        {
          title: '经办人',
          align: 'center',
          dataIndex: 'Agent',
          width: 140,
        },
        {
          title: '操作',
          align: 'center',
          width: 200,
          fixed: 'right',
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        requestParameters.strContent.YDLX = this.typeSelect
        return getAreaYdsb(requestParameters).then((res) => {
          return res
        })
      },
      loadDataT: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParamT)
        return getAreaYdsb(requestParameters).then((res) => res)
      },
      loadDataG: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParamG)
        return getAreaYdsb(requestParameters).then((res) => res)
      },
      loadDataL: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParamL)
        // requestParameters.strContent.YDLX = this.typeSelect
        return getAreaYdsb(requestParameters).then((res) => res)
      },
      invalidForm: this.$form.createForm(this, { name: 'invalid' }),
      visibleInvalid: false,
      confirmLoading: false,
    }
  },
  methods: {
    tableRefresh(refresh = false) {
      this.$refs.table.refresh(refresh)
    },
    handleSearch(values) {
      this.queryParam.strContent = values
      this.$refs.table.refresh(true)
    },
    handleReset() {
      this.queryParam.strContent = {}
      this.typeSelect = ''
      this.$refs.table.refresh(true)
    },
    handleChangeForm(record) {
      this.visibleForm = true
      this.editData = record
    },
    handleFormChange() {
      this.$refs.table.refresh()
    },
    handleDeclare(record) {
      if (record.YDLX == '') {
        this.$error({
          title: '提示',
          content: '请填写异动类型',
          onOk: () => {
            this.handleFormChange()
          },
        })
      } else {
        this.$confirm({
          title: '提示',
          content: '是否同意申报该数据？',
          onOk: () => {
            return postYdsb({
              State: 'update',
              ydsb: {
                ID: record.ID,
                State: record.State,
                QjOperator: this.$store.getters.nickname,
                QjOperatTime: moment().format('YYYY-MM-DD'),
              },
            }).then((res) => {
              this.$message.success('异动申报成功')
              this.handleFormChange()
            })
          },
        })
      }
    },
    handleInvalid(record) {
      this.visibleInvalid = true
      this.editData = record
      this.$nextTick(() => {
        this.invalidForm.resetFields()
      })
    },
    handleInvalidConfirm() {
      this.invalidForm.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          updateYdZF({
            id: this.editData.ID,
            ydReson: values.ydReson,
            ydState: '区级',
          })
            .then((res) => {
              this.editData = {}
              this.visibleInvalid = false
              this.$message.success('异动作废成功')
              this.handleFormChange()
            })
            .finally(() => {
              this.confirmLoading = false
            })
        }
      })
    },
    handleInvalidCancel() {
      this.invalidForm.resetFields()
      this.editData = {}
      this.visibleInvalid = false
    },
  },
}
</script>
